@charset "UTF-8";
@import "./_kit/variables.scss";
@import "./_kit/_mixin.scss";
@import "./_kit/button";
@import "./_components/radio";
@import "./_components/checkbox";


.apply-success-container {
    background: url("../../assets/images/background.png") repeat; //position: absolute;
    width: 100%;
    min-height: 100%;
    min-height: 100vh; //overflow: auto;
    .apply-success-wrap {
        padding: $rem*30 $rem*20 0;
        .apply-success-name {
            background-color: rgba(253, 255, 254, .9);
            text-align: center;
            border-radius: $rem*10;
            padding-bottom: $rem*20;
            &>img {
                width: $rem*312;
                height: $rem*239;
                margin: $rem*100 auto $rem*30;
            }
            h3 {
                line-height: $rem*90;
                color: #333;
                font-size: $rem*48;
            }
            h6 {
                font-size: $rem*26;
                padding-bottom: $rem*40;
            }
        }
        .apply-success-title {
            &>img {
                margin: $rem*50 auto $rem*30;
            }
        }
        .course-info {
            background-color: rgba(253, 255, 254, .9);
            border-radius: $rem*10;
            padding: $rem*30 $rem*30 $rem*40;
            margin-top: $rem*30;
            h3 {
                font-size: $rem*32;
                color: #333;
            }
            p {
                margin-top: $rem*20;
                font-size: $rem*24;
                color: #666;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
            }
        }
        .apply-volunteer-course {
            h3 {
                font-size: $rem*36;
                color: #333;
            }
        }
        .apply-info {
            @include clearfix;
            h6,
            span {
                display: inline-block;
                font-size: $rem*28;
                color: #666;
            }
            .name {
                font-size: $rem*34;
                color: #333333;
            }
            span {
                float: right;
                ;
            }
            .apply-name {
                margin-top: $rem*10;
            }
        }
        .apply-info-sign {
            margin-top: $rem*50;
            .sex {
                margin-top: $rem*14;
            }
            .time {
                margin-top: $rem*10;
            }
        }
        .apply-info-detail {
            margin-top: $rem*50;
        }
    }
}

.apply-info-sign {
    /*   margin-top: $rem*50;*/
    input {
        border-bottom: $rem*1 solid #999;
        background-color: transparent;
        font-size: $rem*26;
        color: #333;
        line-height: $rem*50;
         margin: $rem*22 0;
    }
    input[type=text] {
        width: 100%;
        margin: $rem*22 0;
    }
    input[type=number] {
        width: 100%;
        border: none;
        border-bottom: $rem*1 solid #999;
    }
    input[type=radio] {
        width: $rem*26;
        height: $rem*26;
        vertical-align: -$rem*4;
        margin-right: $rem*10;
    }
    input[type=checkbox] {
        width: $rem*26;
        height: $rem*26;
        vertical-align: -$rem*4;
        margin-right: $rem*10;
        color: #999;
    }
    h6,
    span {
        font-size: $rem*28;
        color: #666;
        padding: $rem*16 0;
    }
    span {
        color: #999;
    }
    textarea {
        width: 100%;
        border: $rem*1 solid #999;
        background-color: transparent;
        font-size: $rem*26;
        color: #999;
        margin-top: $rem*34;
        height: $rem*150;
    }
    .box {
        padding-right: $rem*20;
        display: inline-block;
        .ui-radio .sign {
            vertical-align: baseline;
            margin-right: $rem*8;
        }
    }
}


.info {
    border-bottom: $rem*1 solid #333;
    padding-bottom: $rem*8;
}

.pay-weichat {
    @include clearfix;
    .icon-wechat {
        background: url("../../assets/images/wechat.png") no-repeat;
        width: $rem*40;
        height: $rem*34;
        float: left;
        margin-top: $rem*48;
        margin-right: $rem*30;
        background-size: contain;
    }
    .weichat {
        font-size: $rem*32;
        color: #333;
        margin-right: $rem*30;
        line-height: $rem*36;
        margin-top: $rem*30;
        span {
            font-size: $rem*20;
        }
    }
    .icon-checked {
        background: url("../../assets/images/checked.png") no-repeat;
        width: $rem*48;
        height: $rem*48;
        float: right;
        margin-top: -$rem*66;
        background-size: contain;
    }
}

.fixed-tools-wrap {
    height: $rem*100;
}

.fixed-tools {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    height: $rem*120;
    line-height: $rem*120;
    padding-left: $rem*20;
    color: #666;
    font-size: $rem*28;
    .price {
        color: #CB1219;
    }
    .signup-btn {
        height: 100%;
        width: $rem*200;
    }
}

.apply-info {
    .title {
        float: left;
    }
    .name {
        float: initial;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-left: $rem*20;
    }
}

.tel-group{
    overflow:hidden;
    &>input{
        &:first-child{
            width:25%;
            float:left;
        }
        &:last-child{
            width:72%;
            float:right;
        }
    }
}